<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>xeokit visual test</title>
    <link href="css/pageStyle.css" rel="stylesheet" />
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>

  <script type="module">
    import { Viewer, SceneModel } from "../../dist/xeokit-sdk.min.es.js";
    import { signalTestComplete } from "./lib/utils.js";

    const viewer = new Viewer({
      canvasId: "myCanvas",
      transparent: true,
      dtxEnabled: true, // Enable data texture model representation
    });

    viewer.scene.camera.eye = [-21.8, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    const sceneModel = new SceneModel(viewer.scene, {
      id: "table",
      position: [0, 0, 0],
      scale: [1, 1, 1],
      rotation: [0, 0, 0],
      edges: true,
      dtxEnabled: true,
    });

    sceneModel.createGeometry({
      id: "myBoxGeometry",
      primitive: "triangles",
      buckets: [
        {
          positionsCompressed: [
            65525, 65525, 65525, 0, 65525, 65525, 0, 0, 65525, 65525, 0, 65525,
            65525, 0, 0, 65525, 65525, 0, 0, 65525, 0, 0, 0, 0,
          ],
          indices: [
            0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5, 0, 5, 6, 0, 6, 1, 1, 6, 7, 1, 7,
            2, 7, 4, 3, 7, 3, 2, 4, 7, 6, 4, 6, 5,
          ],
          edgeIndices: [
            1, 0, 2, 1, 3, 0, 2, 3, 4, 3, 5, 0, 4, 5, 6, 5, 6, 1, 7, 6, 7, 2, 7,
            4,
          ],
        },
      ],
      positionsDecodeMatrix: [
        0.00003052270125906143, 0, 0, 0, 0, 0.00003052270125906143, 0, 0, 0, 0,
        0.00003052270125906143, 0, -1, -1, -1, 1,
      ],
    });

    sceneModel.createMesh({
      id: "redLegMesh",
      geometryId: "myBoxGeometry",
      position: [-4, -6, -4],
      scale: [1, 3, 1],
      rotation: [0, 0, 0],
      color: [1, 0.3, 0.3],
    });

    sceneModel.createEntity({
      id: "redLeg",
      meshIds: ["redLegMesh"],
    });

    sceneModel.createMesh({
      id: "greenLegMesh",
      geometryId: "myBoxGeometry",
      position: [4, -6, -4],
      scale: [1, 3, 1],
      rotation: [0, 0, 0],
      color: [0.3, 1.0, 0.3],
    });

    sceneModel.createEntity({
      id: "greenLeg",
      meshIds: ["greenLegMesh"],
    });

    sceneModel.createMesh({
      id: "blueLegMesh",
      geometryId: "myBoxGeometry",
      position: [4, -6, 4],
      scale: [1, 3, 1],
      rotation: [0, 0, 0],
      color: [0.3, 0.3, 1.0],
    });

    sceneModel.createEntity({
      id: "blueLeg",
      meshIds: ["blueLegMesh"],
    });

    sceneModel.createMesh({
      id: "yellowLegMesh",
      geometryId: "myBoxGeometry",
      position: [-4, -6, 4],
      scale: [1, 3, 1],
      rotation: [0, 0, 0],
      color: [1.0, 1.0, 0.0],
    });

    sceneModel.createEntity({
      id: "yellowLeg",
      meshIds: ["yellowLegMesh"],
    });

    sceneModel.createMesh({
      id: "purpleTableTopMesh",
      geometryId: "myBoxGeometry",
      position: [0, -3, 0],
      scale: [6, 0.5, 6],
      rotation: [0, 0, 0],
      color: [1.0, 0.3, 1.0],
    });

    sceneModel.createEntity({
      id: "purpleTableTop",
      meshIds: ["purpleTableTopMesh"],
    });

    sceneModel.finalize();
    signalTestComplete(viewer);
  </script>
</html>
